<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--    引入css 样式-->
  <link rel="stylesheet"  href="/layui/css/layui.css">
  <!--    引入js -->
  <script src="/layui/layui.js"></script>
</head>
<body >
<div style="margin-top: 30px;margin-left: 20%;width: 60%">
    <form class="layui-form layui-form-pane" lay-filter="test1" action="">
<!--        隐藏域 存在，但是页面看不见 因为修改的时候，是通过id-->
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">食物名称：</label>
            <div class="layui-input-block">
                <input type="text" name="fname" required  lay-verify="required" placeholder="请输入食物名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户姓名：</label>
            <div class="layui-input-block">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">食物价格：</label>
            <div class="layui-input-block">
                <input type="text" name="price" required  lay-verify="required" placeholder="请输入食物价格" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">食物描述：</label>
            <div class="layui-input-block">
                <textarea name="info" placeholder="请输入食物描述" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">修改食物</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script>
    //从本地存储获取对应的数据 localStorage.getItem 存储的数据是json的格式
    var obj=JSON.parse(localStorage.getItem("food"))
    //Demo
    layui.use('form', function(){
        var form = layui.form,
            $=layui.$;
        //修改页面，需要为表单赋值
        form.val("test1",obj);
        //提交
        form.on('submit(formDemo)', function(data){
            //请求新增接口 Ajax post
            $.post("/api/food/update.do",data.field,function (res){
                //验证接口的返回 是否成功
                if(res.code==0){
                    layer.msg("亲，修改成功！");
                    location.href="list.html";
                }else {
                    layer.msg(res.data);
                }
            });
            return false;
        });
    });
</script>
</body>
</html>